<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background: transparent !important;
			background: #F1C40F !important;
		}
		/* msg */

		.view_frm_msg {
			position: relative;
			width: 250px;
			background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 80%);
			border-radius: 5rem;
			animation: bounceInLeft 1s;
			margin-left: 0.5rem;
			transition: max-height 3s;
		}

		.view_frm_msgs {
			padding: 0.25rem;
			position: relative;
			margin-top: 1rem;
			position: relative;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: justify;
		}

		.view_frm_msg .a1 {
			width: 54px;
			height: 54px;
			border-radius: 50%;
			margin-right: 0.35rem;
		}

		.view_frm_msg .a2 {
			width: 120px;
			line-height: 25px;
		}

		.view_frm_msg .a2 h2 {
			color: #fff;
		}

		.view_frm_msg .a2 p {
			color: #FFD600
		}

		.view_frm_msg .a3 {
			position: absolute;
			right: 0;
			top: 0rem;
			width: 5rem;
			margin-top: -1rem;
			margin-right: 0rem;
		}

		@keyframes bounceInLeft {
			0% {
				opacity: 0;
				transform: translate3d(-3000px, 0, 0);
			}
			60% {
				opacity: 1;
				transform: translate3d(25px, 0, 0);
			}
			75% {
				transform: translate3d(-10px, 0, 0);
			}
			90% {
				transform: translate3d(5px, 0, 0);
			}
			100% {
				transform: none;
			}
		}
	</style>
</head>

<body>
	<div class="view_frm_msg">
		<div class="view_frm_msgs">
			<img class="a1" src="../i/touxiang.png" />
			<div class="a2">
				<h2 class="aui-font-size-14 aui-ellipsis-1">速翔网络阿斯达阿斯达</h2>
				<p class="aui-font-size-14 aui-ellipsis-1">来呗就是</p>
			</div>
			<img class="a3" src="../i/zhibo/huojian.png" />
		</div>
	</div>
</body>
<!-- <script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script> -->
<script type="text/javascript">
	apiready = function() {}
	function c() {
		api.closeFrame();
	}
	// opacity : 0
	function a() {
		setTimeout(function() {
			$('.view_frm_msg').animate({
				top: '-2rem',
				opacity: 0
			}, 300, function() {
				$(this).remove();
			})
		}, 2000)
	}
	a();
</script>

</html>
